 <template>
  <div id="app">
    <div
      id="errorBox"
      :class="{show: this.$store.state.errorBox,succ: this.$store.state.errorBoxSucc}"
      v-text="this.$store.state.errorBoxText"
    >
    </div>
    <main-header ref="mainHead"></main-header>
    <router-view
      :class="{filterBlur: this.$store.state.filterBlur, nofilter: !this.$store.state.loginState}"
      />
  </div>
</template>

<script>
import mainHeader from '@/pages/header/Header'
export default {
  name: 'App',
  data () {
    return {
      errorText: ''
    }
  },
  components: {
    mainHeader
  },
  methods: {
    showLogBox () {
      this.$refs.mainHead.showLogBox(true)
    }
  },
  beforeCreate () {
    this.$ajax.get('/web/php/index.php')
      .then((data) => {
        let result = data.data
        if (result.userid) {
          this.$store.dispatch('changeState', {
            name: 'changeLoginState',
            value: true
          })
        }
        this.$store.dispatch('changeState', {
          name: 'changeUsername',
          value: result.username
        })
        this.$store.dispatch('changeState', {
          name: 'changeUserid',
          value: result.userid
        })
        this.$store.dispatch('changeState', {
          name: 'changeUserphoto',
          value: result.userphoto
        })
        let locUrl = window.location.hash
        let veriUrl = ['#/article/update', '#/article/add']
        if (veriUrl.indexOf(locUrl.substring(0, locUrl.lastIndexOf('/'))) >= 0) {
          if (!(this.$store.state.loginState)) {
            this.$router.push('/')
            this.common.showRegError('没有检测到登录信息，请登录后重试', this)
            console.log(this.$store.state.loginState)
          } else {
            if (locUrl.substring(0, locUrl.lastIndexOf('/')) === '#/article/update' || locUrl.substring(0, locUrl.lastIndexOf('/')) === '#/article/add') {
              document.getElementsByClassName('header-wrap')[0].style.display = 'none'
            }
          }
        }
      })
  },
  mounted () {
    this.$router.beforeEach((to, from, next) => {
      const nextRouter = ['addArticle', 'updateArticle']
      if (nextRouter.indexOf(to.name) >= 0) {
        if (this.$store.state.loginState) {
          next()
        } else {
          this.common.showRegError('没有检测到登录信息，请登录后重试', this)
          this.$refs.mainHead.showLogBox(true)
        }
      } else {
        next()
      }
    })
  }
}
</script>

<style lang="stylus">
html{
  background: #f4f5f5;
}
body{
  transition: all .3s
}
/* chrome下自定義瀏覽器滾動條樣式 */
body::-webkit-scrollbar{
   width:5px;
   background:rgb(230, 230, 230);/* 整个滚条背景 */
}
body::-webkit-scrollbar-thumb{
   -webkit-border-radius:4px;
   border-radius:4px;
   background:rgb(192, 192, 192); /* 滚条内嵌颜色 */
}
body::-webkit-scrollbar-button {
    /* background-color:rgb(196, 196, 196);两边端按钮颜色 */
    display: none
}
/* ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(243, 16, 16, 0.4);
} */
#errorBox
  width 6.4rem
  max-width 100%
  max-height 2rem
  padding .2rem
  position fixed
  top -2rem
  left calc(50% - 3.2rem)
  box-sizing border-box
  border-radius .1rem
  text-align center
  color red
  background #ffd2d2
  border .02rem solid red
  opacity 0
  transition .5s
  z-index 999
  &.show
      top 8%
      opacity 1
  &.succ
    background #d6ffd6
    color #16bb00
    border-color #21ff03
</style>
